<template>
    <view class="more-filter u-border-top">
      <view class="more-list" v-if="!activeFilter">
        <view
          class="more-item is-link u-border-bottom"
          v-for="(item, index) in moreList"
          :key="index"
          @click="handleMore(item)"
        >
          <text class="mi-label">{{ item.label }}</text>
          <text :class="['mi-name', { placeholder: !form[item.propLabel] }]">{{
            form[item.propLabel] || "请选择"
          }}</text>
        </view>
      </view>
      <scroll-view class="more-child" scroll-y="true" v-else>
        <view
          :class="[
            'child-item u-border-bottom',
            { active: item.value === activeFilterData.activeItem },
          ]"
          v-for="(item, index) in activeFilterData.data"
          :key="index"
          @click="handleOpt(item)"
        >
          {{ item.label }}
          <u-icon
            name="checkbox-mark"
            size="32"
            v-if="item.value === activeFilterData.activeItem"
          ></u-icon>
        </view>
      </scroll-view>
      <view class="mi-opt">
        <u-button class="mo-btn" v-if="!activeFilter" @click="handleReset"
          >重置</u-button
        >
        <u-button
          class="mo-btn"
          type="primary"
          v-if="!activeFilter"
          @click="handleFilter"
          >确定</u-button
        >
        <u-button
          :hair-line="false"
          :custom-style="customStyle"
          class="mo-btn return"
          v-else
          @click="activeFilter = ''"
          >返回</u-button
        >
      </view>
    </view>
  </template>
  
  <script>
  import {
    postExpList,
    publishList,
    eduList,
    typeList,
    salaryList,
  } from "@/utils/data";
  export default {
    data() {
      return {
        activeFilter: "",
        isFilter: false,
        form: {},
        moreList: [
          {
            label: "期望薪资",
            prop: "salary",
            propLabel: "salaryLabel",
            data: salaryList,
          },
          {
            label: "学历要求",
            prop: "edu",
            propLabel: "eduLabel",
            data: eduList,
          },
          {
            label: "工作年限",
            prop: "exp",
            propLabel: "expLabel",
            data: postExpList,
          },
          {
            label: "更新时间",
            prop: "time",
            propLabel: "timeLabel",
            data: publishList,
          },
          {
            label: "工作性质",
            prop: "type",
            propLabel: "typeLabel",
            data: typeList,
          },
        ],
        customStyle: {
          backgroundColor: "#E9ECEF",
          border: "none",
          color: "#555555",
        },
      };
    },
    computed: {
      activeFilterData() {
        return this.moreList.find((ele) => ele.prop === this.activeFilter);
      },
    },
    methods: {
      handleMore(item) {
        this.activeFilter = item.prop;
      },
      handleOpt(item) {
        let filter = this.moreList.find((ele) => ele.prop === this.activeFilter);
        let filterIdx = this.moreList.findIndex(
          (ele) => ele.prop === this.activeFilter
        );
        this.$set(this.form, filter.prop, item.value);
        this.$set(this.form, filter.propLabel, item.label);
        this.$set(this.moreList[filterIdx], "activeItem", item.value);
        this.activeFilter = "";
      },
      handleFilter() {
        let form = {};
        for (let key in this.form) {
          if (key.indexOf("Label") < 0) {
            form[key] = this.form[key];
          }
        }
        this.$emit("filter", form);
      },
      handleReset() {
        this.moreList = [
          {
            label: "期望薪资",
            prop: "salary",
            propLabel: "salaryLabel",
            data: salaryList,
          },
          {
            label: "学历要求",
            prop: "edu",
            propLabel: "eduLabel",
            data: eduList,
          },
          {
            label: "工作年限",
            prop: "exp",
            propLabel: "expLabel",
            data: postExpList,
          },
          {
            label: "更新时间",
            prop: "time",
            propLabel: "timeLabel",
            data: publishList,
          },
          {
            label: "工作性质",
            prop: "type",
            propLabel: "typeLabel",
            data: typeList,
          },
        ];
        this.form = {};
        this.$emit("reset");
      },
    },
  };
  </script>
  
  <style lang="scss">
  $img-base-dresume: $img-base + "dresume/";
  .more-filter {
    background: $uni-bg-color;
    .scroll-list {
      height: 100%;
    }
    .more-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 26rpx 32rpx;
      font-size: $uni-font-size-base;
      line-height: 54rpx;
      color: $uni-text-color-555;
      box-sizing: border-box;
      &.is-link {
        position: relative;
        padding: 26rpx 72rpx 26rpx 32rpx;
        .placeholder {
          color: $uni-text-color-placeholder;
        }
        &::before {
          content: "";
          display: block;
          position: absolute;
          right: 32rpx;
          top: 50%;
          margin-top: -16rpx;
          width: 32rpx;
          height: 32rpx;
          background-image: url($img-base-dresume + "picker.png");
          background-size: 100% 100%;
        }
      }
    }
    .more-child {
      max-height: calc(54vh - 128rpx);
      overflow: auto;
      .child-item {
        padding: 26rpx 32rpx;
        font-size: $uni-font-size-base;
        line-height: 54rpx;
        color: $uni-text-color-555;
        box-sizing: border-box;
        &.active {
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: $u-type-primary;
        }
      }
    }
    .mi-opt {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24rpx 32rpx;
      .mo-btn:not(.return) {
        margin: 0;
        width: calc(50% - 12rpx);
      }
      .return {
        flex-grow: 1;
      }
    }
  }
  </style>
  